/**
 * 有10000条数据 如何渲染到页面上？
 * 
 * requestAnimation(func)根据页面刷新率调整，页面刷新时调用函数
 * 
 * 思路：
 * 1.根据渲染数量、每次渲染的条数计算出需要渲染的次数
 * 2.获取根节点，循环创建li节点并一次性添加到根节点
 * 3.在渲染结束前递归调用该函数
 */


let dataNum = 10000;
let each = 20;
let currentTime = 0;
let need = Math.ceil(dataNum / each); //向上取整
let content = document.querySelector(".content"); // 渲染的根节点
function add() {
  const fragment = document.createDocumentFragment();
  for (let i = 0; i < each; i++) {
    const li = document.createDocumentFragment();
    li.innerText = Math.floor(i + currentTime * each);
    fragment.appendChild(li);
  }
  currentTime++;
  content.appendChild(fragment);
  if (currentTime < need) {
    window.requestAnimationFrame(add);
  }
  window.requestAnimationFrame(add);
}
